<template>
	<div class="cardTwo">
		<!-- 列表展示 -->
		<div class="cardTwo-list">
			<div class="cardTwo-list__item" v-for="item in listInfo" :key="item.id">
				<el-image
					@click="chooseItem(item)"
					draggable="false"
					:src="$baseUrl + item.iconUrl"
					:class="item.active ? 'active' : ''"
					style="width: 100px; height: 100px"
				></el-image>
				<!-- :src="$baseUrl + item.modelIcon" -->

				<span>{{ item.labelName || '--' }}</span>
				<!-- 列表项工具栏 -->
				<div class="cardTwo-list__tool" v-if="showTool">
					<!-- 左 -->
					<div class="right">
						<el-popover placement="top" width="200" popper-class="topPopver" trigger="click">
							<span slot="reference">
								<i class="el-icon-more"></i>
							</span>
							<template #default>
								<div style="height: 120px">23333</div>
							</template>
						</el-popover>
					</div>
				</div>
			</div>
		</div>
		<!-- 分页 -->
		<div class="cardTwo-page" v-if="listInfo.length > 0 && showTool">
			<el-pagination
				:pager-count="5"
				:page-size="16"
				small
				@current-change="handleCurrentChange"
				background
				layout="prev, pager, next"
				:total="totalPage"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	name: 'CardTwo',
	props: {
		cardData: {
			type: Array,
			default: () => []
		},
		hasTool: {
			type: Boolean,
			default: false
		},
		total: {
			type: Number,
			default: 0
		}
	},
	computed: {
		...mapGetters('common', {
			hasScene: 'queryHasScene'
		})
	},
	data() {
		return {
			showTool: true /* 展示工具栏 */,
			listInfo: [] /* 列表数据 */,
			totalPage: 0 /* 分页总条数 */,
			currentItem: '' /* 当前选中项 */
		};
	},
	watch: {
		cardData(val) {
			val.map((item) => {
				this.$set(item, 'active', false);
				if (typeof item.jhtbName !== 'undefined') {
					this.$set(item, 'labelName', item.jhtbName);
					this.$set(item, 'iconUrl', item.jhtbIcon);
				} else if (typeof item.modelName !== 'undefined') {
					this.$set(item, 'labelName', item.modelName);
					this.$set(item, 'iconUrl', item.modelIcon);
				}
			});

			this.listInfo = val;
		},

		total(val) {
			this.totalPage = val;
		},

		hasTool(val) {
			this.showTool = val;
		}
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},

		// 页面改变的事件派发
		handleCurrentChange(val) {
			this.$emit('pageChange', val);
		},

		// 选中当前项
		chooseItem(val) {
			if (!this.hasScene) {
				this.$message.warning('未选择场景');
				return;
			}

			$ue4.endPoint();
			this.listInfo.map((item) => {
				item.active = false;
			});

			/* 只能选中一项 */
			if (this.currentItem) {
				if (this.currentItem.id === val.id) {
					val.active = false;
					this.currentItem = '';
				} else {
					val.active = true;
					this.currentItem = val;
				}
			} else {
				val.active = true;
				this.currentItem = val;
			}

			if (val.active) {
				if (val.jhtbName !== undefined) {
					$ue4.startActivePoint('point', val);
				} else if (val.modelName !== undefined) {
					$ue4.startModelPoint(val.other, val.fileName);
				}
			} else {
				$ue4.endPoint();
			}
		}
	}
};
</script>

<style lang="scss">
.cardTwo {
	overflow-y: auto;
	height: 100%;
	font-size: 14px;
	padding: 15px;
	background-color: transparent;
	position: relative;
	@include xy-scroll;

	.cardTwo-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15px;
		position: relative;
		justify-content: space-between;

		&__item {
			width: 48%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			font-size: 12px;

			& > span {
				padding: 8px 0;
				color: #ccc;
				display: inline-block;
				text-align: center;
				width: 80px;
				@include xy-overpoint;
			}

			.right {
				padding: 4px;
				opacity: 0.9;
				border-radius: 3px 0 5px 0;
				cursor: pointer;
				transform: rotate(90deg);
				font-weight: bold;

				i {
					color: #333;
					font-size: 14px;
				}
			}

			.active {
				border: 2px solid #2c68f6;
			}
		}

		.el-image {
			width: 100%;
			border-radius: 5px;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.cardTwo-list__tool {
			width: 20px;
			position: absolute;
			bottom: 32px;
			right: 2px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 12px;
			color: $--xy-color-light;
		}
	}

	.cardTwo-page {
		width: 100%;
		@include xy-dfc;
	}
}
</style>
